import { View } from "@tarojs/components";
import ByTag from "@/components/ui/ByTag";
import ByCell from "@/components/ui/ByCell";
import BySpace from "@/components/ui/BySpace";
import ByCellGroup from "@/components/ui/ByCellGroup";

import { FormConstructionPlanExtension } from "@/types/construction";
import Moment from "@/components/app/Moment";

const labelWidth = "5em";

export default ({ source }: { source: FormConstructionPlanExtension }) => {
  const executePostNames = source.executePostNames
    ? source.executePostNames?.split(",")
    : [];
  return (
    <>
      <ByCellGroup className="mb-6" title={source.constructionProjectName}>
        <ByCell border label="开工" labelWidth={labelWidth}>
          <Moment value={source.planStartDate} />
        </ByCell>

        <ByCell border label="完工" labelWidth={labelWidth}>
          <Moment value={source.planFinishDate} />
        </ByCell>

        <View className="flex">
          <ByCell border label="施工工种" labelWidth={labelWidth}>
            {source.workerType || source.workType}
          </ByCell>

          <ByCell border label="必做" className="pl-4" labelWidth={labelWidth}>
            {source.isMustComplete ? "是" : "否"}
          </ByCell>
        </View>

        <View className="flex">
          <ByCell border label="内验" labelWidth={labelWidth}>
            {source.internalTest ? "是" : "否"}
          </ByCell>

          <ByCell
            border
            label="计入工期"
            className="pl-4"
            labelWidth={labelWidth}
          >
            {source.notIncludedPeriod ? "否" : "是"}
          </ByCell>
        </View>

        <ByCell border label="执行岗位" labelWidth={labelWidth}>
          <BySpace gap={6} className="justify-end">
            {executePostNames?.map((item, index) => (
              <ByTag size="small" variant="outline" rounded={false} key={index}>
                {item}
              </ByTag>
            ))}
          </BySpace>
        </ByCell>

        <ByCell border label="开完工控制" labelWidth={labelWidth}>
          是
        </ByCell>
      </ByCellGroup>
    </>
  );
};
